<template>
  <div class="classBoxList" >
        <div 
            class="classBox"
            v-for="(item,index) in classInfoList" 
            :key="index"
        >
            <div><img :src="item.classPic" alt=""></div>
            <div class="boxInfo">
                <div class="boxTitle">
                    <div>
                        <span>{{item.classCategory}}</span><span class="hd">{{item.className}}</span>
                    </div>
                    <div class="del">
                        <i class="el-icon-arrow-down"></i>
                    </div>
                </div>
                <div><span class="c-r">已学{{item.classProgress}}</span><span>学至{{item.classProgressCatalogue}}</span></div>
                <div class="catog-points">
                    <div>
                        <span>笔记{{item.notes}}</span><span>代码{{item.code}}</span><span>问答{{item.questions}}</span>
                    </div>
                    <div>
                        <button>加入课表</button>
                        <button>继续学习</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
data() {
    return {
        classInfoList:[
            {
                classId:10001,
                classPic:'https://img4.sycdn.imooc.com/529dc3380001379906000338-360-202.jpg',
                classCategory:'免费课程',
                className:'初识HTML(5)+CSS(3)-2020升级版',
                classProgress:'0%',
                classProgressCatalogue:'1.01 代码初体验，制作我的第一个网页',
                notes:0,
                code:0,
                questions:0,
            },
            {   
                classId:10002,
                classPic:'https://img1.sycdn.imooc.com/574669dc0001993606000338-360-202.jpg',
                classCategory:'免费课程',
                className:'C语言入门',
                classProgress:'10%',
                classProgressCatalogue:'5.01 函数',
                notes:23,
                code:44,
                questions:1,
            }
        ]
    }
},
}
</script>

<style>
@import url('../assets/css/classInfoList.css');
</style>